<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="客户姓名" prop="consumerName">
        <el-input
          v-model="queryParams.consumerName"
          placeholder="请输入客户姓名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="电话号码" prop="mobile">
        <el-input
          v-model="queryParams.mobile"
          placeholder="请输入电话号码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="问卷编号" prop="questionnaireNo">
        <el-input
          v-model="queryParams.questionnaireNo"
          placeholder="请输入问卷编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="vin号" prop="vin">
        <el-input
          v-model="queryParams.vin"
          placeholder="请输入vin号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!--        <el-button-->
        <!--          type="primary"-->
        <!--          plain-->
        <!--          icon="el-icon-plus"-->
        <!--          size="mini"-->
        <!--          @click="handleAdd"-->
        <!--          v-hasPermi="['research:consumer:add']"-->
        <!--        >新增-->
        <!--        </el-button>-->
        <!--      </el-col>-->
        <!--      <el-col :span="1.5">-->
        <!--        <el-button-->
        <!--          type="success"-->
        <!--          plain-->
        <!--          icon="el-icon-edit"-->
        <!--          size="mini"-->
        <!--          :disabled="single"-->
        <!--          @click="handleUpdate"-->
        <!--          v-hasPermi="['research:consumer:edit']"-->
        <!--        >修改-->
        <!--        </el-button>-->
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['research:consumer:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['research:consumer:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="consumerList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="序号" type="index" align="center" show-overflow-tooltip width="50px">
      </el-table-column>
      <el-table-column label="客户姓名" align="center" prop="consumerName"/>
      <el-table-column label="电话号码" align="center" prop="mobile"/>
      <el-table-column label="性别" align="center" prop="sex" :formatter="sexFormat"/>
      <el-table-column label="省份" align="center" prop="province"/>
      <el-table-column label="城市" align="center" prop="city"/>
      <el-table-column label="生日" align="center" prop="birthday" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.birthday, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="婚姻状况" align="center" prop="maritalStatus" :formatter="maritalStatusFormat"/>
      <el-table-column label="学历" align="center" prop="education"/>
      <el-table-column label="问卷编号" align="center" prop="questionnaireNo"/>
      <el-table-column label="vin号" align="center" prop="vin"/>
      <el-table-column label="产品编号" align="center" prop="productNo"/>
      <el-table-column label="产品名称" align="center" prop="productName"/>
      <el-table-column label="发动机序列号" align="center" prop="engineNo"/>
      <el-table-column label="生产日期" align="center" prop="productionDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.productionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="录入经销商名称" align="center" prop="inputDealerName"/>
      <el-table-column label="经销商名称" align="center" prop="dealerName"/>
      <el-table-column label="经销商类型" align="center" prop="dealerType" :formatter="dealerTypeFormat"/>
      <el-table-column label="购车经历" align="center" prop="carBuyExperience"/>
      <el-table-column label="备注" align="center" prop="remark"/>
      <el-table-column label="问卷填写状态" align="center" prop="questionnaireStatus" :formatter="questionnaireStatusFormat"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.questionnaireStatus === '1'"
            size="mini"
            type="text"
            icon="el-icon-detail"
            @click="handleQuestionnaireDetail(scope.row)"
            v-hasPermi="['research:consumer:questionnaire:detail']"
          >问卷查看
          </el-button>
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-edit"-->
          <!--            @click="handleUpdate(scope.row)"-->
          <!--            v-hasPermi="['research:consumer:edit']"-->
          <!--          >修改-->
          <!--          </el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['research:consumer:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改客户管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="客户姓名" prop="consumerName">
          <el-input v-model="form.consumerName" placeholder="请输入客户姓名"/>
        </el-form-item>
        <el-form-item label="电话号码" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入电话号码"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择性别">
            <el-option
              v-for="dict in sexOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="省份" prop="province">
          <el-input v-model="form.province" placeholder="请输入省份"/>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="form.city" placeholder="请输入城市"/>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker clearable size="small"
                          v-model="form.birthday"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择生日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="婚姻状况" prop="maritalStatus">
          <el-select v-model="form.maritalStatus" placeholder="请选择婚姻状况">
            <el-option
              v-for="dict in maritalStatusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学历" prop="education">
          <el-input v-model="form.education" placeholder="请输入学历"/>
        </el-form-item>
        <el-form-item label="问卷编号" prop="questionnaireNo">
          <el-input v-model="form.questionnaireNo" placeholder="请输入问卷编号"/>
        </el-form-item>
        <el-form-item label="vin号" prop="vin">
          <el-input v-model="form.vin" placeholder="请输入vin号"/>
        </el-form-item>
        <el-form-item label="产品编号" prop="productNo">
          <el-input v-model="form.productNo" placeholder="请输入产品编号"/>
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入产品名称"/>
        </el-form-item>
        <el-form-item label="发动机序列号" prop="engineNo">
          <el-input v-model="form.engineNo" placeholder="请输入发动机序列号"/>
        </el-form-item>
        <el-form-item label="生产日期" prop="productionDate">
          <el-date-picker clearable size="small"
                          v-model="form.productionDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择生产日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="录入经销商名称" prop="inputDealerName">
          <el-input v-model="form.inputDealerName" placeholder="请输入录入经销商名称"/>
        </el-form-item>
        <el-form-item label="经销商名称" prop="dealerName">
          <el-input v-model="form.dealerName" placeholder="请输入经销商名称"/>
        </el-form-item>
        <el-form-item label="经销商类型" prop="dealerType">
          <el-select v-model="form.dealerType" placeholder="请选择经销商类型">
            <el-option
              v-for="dict in dealerTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="购车经历" prop="carBuyExperience">
          <el-input v-model="form.carBuyExperience" placeholder="请输入购车经历"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 问卷问题列表 -->
    <el-drawer
      title="问卷详情"
      :visible.sync="dialogQuestionTableVisible"
      direction="rtl">
<!--      :before-close="handleClose">-->

      <el-form
        ref="answerForm"
        label-position="left"
        label-width="25px"
      >
        <!-- 循环后端给你的所有题 -->
        <div
          v-for="(item, index) in questionList"
          :key="item.questionId"
        >
          <!-- 1 单选 -->
          <!-- 2 判断 -->
          <!-- 3 多选 -->
          <!-- 4 简答 -->
          <div style="margin-left: 25px">

            <!-- 题目的信息 -->

            <span style="font-weight: 700;margin-top: 30px">
              第{{ index + 1 }}题：{{
                item.questionContent
              }}
              <span v-if="item.questionType === 1">（单选）</span>
              <span v-if="item.questionType === 2">（判断）</span>
              <span v-if="item.questionType === 3">（多选）</span>
              <span v-if="item.questionType === 4">（简答）</span>
            </span>
          </div>

          <!-- 如果questionType 等于1 那么他是单选题 -->
          <!-- 题目绑定的值是 answerForm.answers[index]  -->

          <div v-if="item.questionType === 1" style="margin-top: 10px">
            <el-form-item label="" prop="answers">
              <el-radio-group disabled v-model="answerForm.answers[index]">
                <div v-for="choiceItem in item.choiceList" style="height: 20px">
                  <el-radio :label="choiceItem.choiceId" :key="choiceItem.choiceId">
                    {{ choiceItem.choiceContent }}
                  </el-radio>
                  <br>
                </div>
              </el-radio-group>
            </el-form-item>
          </div>

          <!-- 如果questionType 等于2 那么他是判断题 -->
          <!-- 题目绑定的值是 answerForm.answers[index]  -->

          <div v-if="item.questionType === 2" style="margin-top: 10px">
            <el-form-item label="" prop="answers">
              <el-radio-group v-model="answerForm.answers[index]">
                <el-radio label="对">{{ item.stSelecta }}</el-radio>
                <el-radio label="错">{{ item.stSelectb }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <!-- 如果questionType 等于3 那么他是多选题 -->
          <!-- 题目绑定的值是 answerForm.answers[index]  -->

          <div v-if="item.questionType === 3">
            <el-form-item label="" prop="answers">
              <el-checkbox-group
                @input="change($event)"
                v-model="answerForm.answers[index]"
                disabled
              >
                <div v-for="choiceItem in item.choiceList" style="height: 20px">
                  <el-checkbox :label="choiceItem.choiceId" :key="choiceItem.choiceId">
                    {{ choiceItem.choiceContent }}
                  </el-checkbox>
                </div>
                <el-input
                  disabled
                  v-if="item.isCheckDesc === '1'"
                  style="margin-top: 10px"
                  type="textarea"
                  v-model="answerForm.checkDescList[index]"
                ></el-input>
              </el-checkbox-group>
            </el-form-item>
          </div>

          <!-- 如果questionType 等于4 那么他是简答题 -->
          <!-- 题目绑定的值是 answerForm.answers[index]  -->

          <div v-if="item.questionType === 4" style="margin-top: 10px">
            <el-form-item label="" prop="answers">
              <!-- <el-form-item label="活动形式"> -->
              <el-input disabled
                        type="textarea"
                        v-model="answerForm.answers[index]"
              ></el-input>
            </el-form-item>
          </div>
        </div>

      </el-form>
    </el-drawer>

  </div>
</template>

<script>
import {
  listConsumer,
  getConsumer,
  delConsumer,
  addConsumer,
  updateConsumer,
  exportConsumer,
  getConsumerQuestionnaireDetail
} from '@/api/research/consumer'

export default {
  name: 'Consumer',
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户管理表格数据
      consumerList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 性别字典
      sexOptions: [],
      // 婚姻状况字典
      maritalStatusOptions: [],
      // 经销商类型字典
      dealerTypeOptions: [],
      // 问卷填写类型字典
      questionnaireStatusOptions: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        consumerName: null,
        mobile: null,
        sex: null,
        province: null,
        city: null,
        birthday: null,
        maritalStatus: null,
        education: null,
        questionnaireNo: null,
        vin: null,
        productNo: null,
        productName: null,
        engineNo: null,
        productionDate: null,
        inputDealerName: null,
        dealerName: null,
        dealerType: null,
        carBuyExperience: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 问卷列表框
      dialogQuestionTableVisible: false,
      // 问题列表
      questionList: [],
      answerForm: {
        //每一道题的值
        answers: [],
        // 多选题简答框内容
        checkDescList: []
      }
    }
  },
  created() {
    this.getList()
    this.getDicts('sv_consumer_sex').then(response => {
      this.sexOptions = response.data
    })
    this.getDicts('sv_marital_status').then(response => {
      this.maritalStatusOptions = response.data
    })
    this.getDicts('sv_dealer_type').then(response => {
      this.dealerTypeOptions = response.data
    })
    this.getDicts('sv_questionnaire_status').then(response => {
      this.questionnaireStatusOptions = response.data
    })
  },
  methods: {
    /** 查询客户管理列表 */
    getList() {
      this.loading = true
      listConsumer(this.queryParams).then(response => {
        this.consumerList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 性别(0-女,1-男)字典翻译
    sexFormat(row, column) {
      return this.selectDictLabel(this.sexOptions, row.sex)
    },
    // 婚姻状况(0-未婚,1-已婚)字典翻译
    maritalStatusFormat(row, column) {
      return this.selectDictLabel(this.maritalStatusOptions, row.maritalStatus)
    },
    // 经销商类型字典翻译
    dealerTypeFormat(row, column) {
      return this.selectDictLabel(this.dealerTypeOptions, row.dealerType)
    },
    // 问卷填写状态字典翻译
    questionnaireStatusFormat(row, column) {
      return this.selectDictLabel(this.questionnaireStatusOptions, row.questionnaireStatus)
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        consumerId: null,
        consumerName: null,
        mobile: null,
        sex: null,
        province: null,
        city: null,
        birthday: null,
        maritalStatus: null,
        education: null,
        questionnaireNo: null,
        vin: null,
        productNo: null,
        productName: null,
        engineNo: null,
        productionDate: null,
        inputDealerName: null,
        dealerName: null,
        dealerType: null,
        carBuyExperience: null,
        questionnaireStatus: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.consumerId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加客户管理'
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const consumerId = row.consumerId || this.ids
      getConsumer(consumerId).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改客户管理'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.consumerId != null) {
            updateConsumer(this.form).then(response => {
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addConsumer(this.form).then(response => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const consumerIds = row.consumerId || this.ids
      this.$confirm('是否确认删除客户管理编号为"' + consumerIds + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delConsumer(consumerIds)
      }).then(() => {
        this.getList()
        this.msgSuccess('删除成功')
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有客户管理数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return exportConsumer(queryParams)
      }).then(response => {
        this.download(response.msg)
      })
    },
    /** 查看客户问卷详情操作 */
    handleQuestionnaireDetail(row) {
      this.dialogQuestionTableVisible = true
      // 获取问卷题目
      getConsumerQuestionnaireDetail(row.consumerId).then(response => {
        this.questionList = response.rows
        for (let i = 0; i < this.questionList.length; i++) {
          if (this.questionList[i].questionType === 3) {
            // 如果他是多选题的话，字符串转数字数组
            if (this.questionList[i].consumerAnswer!=null){
              this.answerForm.answers[i] = this.questionList[i].consumerAnswer.split(',').map(Number)
            }
            this.answerForm.checkDescList[i] = this.questionList[i].checkDesc
          } else if (this.questionList[i].questionType === 1) {
            // 单选转数字
            this.answerForm.answers[i] = this.questionList[i].consumerAnswer - 0
          } else {
            // 简答
            this.answerForm.answers[i] = this.questionList[i].consumerAnswer
          }
        }
      })
    }
    // 抽屉关闭提示
    //   handleClose(done) {
    //     this.$confirm('确认关闭？')
    //       .then(_ => {
    //         done();
    //       })
    //       .catch(_ => {});
    //   }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

// 抽屉滚动条
.el-drawer {

  overflow: scroll
}


</style>

